<template>
  <div class="dome">
    <div class="cropper">
      <img :src="img" class="img" />
      <!-- option是配置，格式是对象，getbase64Data是组件的一个方法获取裁剪完的头像 2.14新增一个获取getblobData的方法 -->
      <h5-cropper :option="option" @getbase64Data="getbase64Data" @getblobData="getblobData" @getFile="getFile">
        h5
      </h5-cropper>
    </div>
  </div>
</template>

<script>
import H5Cropper from 'vue-cropper-h5'
export default {
  components: { H5Cropper },
  data() {
    return {
      option: {
        ceilbutton: true, // 操作按钮是否在顶部
        canMoveBox: true, // 截图框能否拖动
        fixedBox: false, // 固定截图框大小 不允许改变
        centerBox: true, // 截图框是否被限制在图片里面
        fixed: false // 是否开启截图框宽高固定比例
      }, // 配置
      img:
        'http://geren.yi-school.top/images/logo.png'
    }
  },
  methods: {
    getbase64Data(data) {
      this.img = data
    },
    getblobData(data) {
      console.log('getblobData-', data)
    },
    getFile(file) {
      console.log('file-', file)
    }
  }
}
</script>

<style scoped>
.dome {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  padding-left: 22px;
}
.cropper {
  width: 80px;
  height: 80px;
  line-height: 80px;
  /* 切记position: relative一定要有 */
  position: relative;
  border-radius: 80px;
  overflow: hidden;
  text-align: center;
}
.img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.info {
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  margin-left: 30px;
  flex: 1;
  text-align: left;
}
</style>
